<template>
  <div>
    <div class="header">
      <div class="arrow-with-text" @click="goBack">
        <van-icon name="arrow-left" class="back-icon" />
        <i class="el-icon-back" style="font-size: 24px"></i>
      </div>
    </div>
    <div class="menu">
      <button @click="qiehuan" class="custom-button">
        切换账号 <i class="el-icon-unlock"></i>
      </button>
      <button @click="logout" class="custom-button">
        退出登录 <i class="el-icon-unlock"></i>
      </button>
      <button @click="zhuxiao(user.userid)" class="custom-button">
        账户注销 <i class="el-icon-unlock"></i>
      </button>
    </div>


    <el-dialog title="切换账号" :visible.sync="dialogFormVisible">
      <el-table :data="tableData" style="width: 100%; max-width: 600px; margin: 0 auto;">
        <el-table-column label="基本信息" width="300">
          <template slot-scope="scope">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-avatar :src="scope.row.avatarUrl" style="display: block; margin-bottom: 10px;"></el-avatar>
              </el-col>
              <el-col :span="16">
                <div>
                  <span>账号:{{ scope.row.username }}</span>
                </div>
                <div>
                  <span style="color: #999;">手机号:{{ scope.row.phone }}</span>
                </div>
                <div>
                  <span style="color: #999;">邮箱:{{ scope.row.email }}</span>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="huan(scope.row)" class="operation-button">切换该账号</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      user: {},
      count: 0,
      dialogFormVisible: false,
      tableData: []
    };
  },
  created() {
    const userStr = sessionStorage.getItem("user");
    this.user = JSON.parse(userStr);
  },
  beforeDestroy() {
    // 清理资源和监听器
    // ...
  },
  methods: {
    logout() {
      const confirmMessage = '此操作将退出重新登陆, 是否继续?';
      const confirmTitle = '提示';
      const confirmButtonText = '确定';
      const cancelButtonText = '取消';
      const confirmType = 'warning';

      this.$confirm(confirmMessage, confirmTitle, {
        confirmButtonText,
        cancelButtonText,
        type: confirmType
      }).then(() => {
        try {
          sessionStorage.removeItem("user");
          sessionStorage.removeItem("currency")
          this.$router.push("/login").catch(error => {
            console.error('路由跳转失败:', error);
          });
        } catch (error) {
          console.error('退出登录时发生错误:', error);
        }
      }).catch(() => {
        // 用户取消了确认对话框
        console.log('用户取消了退出操作');
      });
    },

    findAllUser() {
      axios.get("http://localhost:6001/user/findAllUser").then(res => {
        this.tableData = res.data.data.user;
      });
    },
    qiehuan() {
      this.findAllUser();
      this.dialogFormVisible = true;
    },
    huan(row) {
      sessionStorage.removeItem("user");
      sessionStorage.removeItem("currency")
      sessionStorage.setItem("user", JSON.stringify(row));
      this.$router.push("/wo");
      const userStr = sessionStorage.getItem("user");
      this.user = JSON.parse(userStr);
      this.$message.success("已成功切换至" + this.user.username + "账号");
    },

    goBack() {
      this.$router.push('/shezhi');
      this.$router.go(0);
    },
    async zhuxiao(userid) {
      // 验证 userid 是否有效
      if (!userid) {
        this.$message.error('用户ID无效');
        return;
      }

      try {
        const confirmResult = await this.$confirm('此操作将注销账号并不可逆, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        if (confirmResult !== 'confirm') {
          // 用户点击取消
          return;
        }

        const response = await axios.get(`http://localhost:6001/user/deleteById`, {
          params: { userid }
        });
        this.$router.push('/login');
        this.handleSuccess(response);
      } catch (error) {
        this.handleError(error);
      }
    },
  }
};
</script>

<style scoped>
/* 整体页面背景色 */
body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-icon {
  color: #333;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.back-icon van-icon {
  margin-right: 5px;
}

/* van-cell-group 样式 */
.van-cell-group {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.van-cell {
  background-color: transparent;
  padding: 15px;
  border-bottom: 1px solid #eaeaea;
  border-radius: 0;
  margin: 0;
}

.profile, .menu {
  margin-bottom: 20px;

}

.van-cell:last-child {
  border-bottom: none;
}

.switch-account-button {
  color: #fff;
  background-color: #1890ff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: inline-block;
}

.switch-account-button:hover {
  background-color: #096dd9;
}

/* el-dialog 样式 */
.el-dialog {
  width: 85%;
  max-width: 650px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.el-dialog__title {
  font-size: 20px;
  color: #333;
  padding: 15px 20px;
  border-bottom: 1px solid #eaeaea;
}

.el-dialog__body {
  padding: 20px;
}

/* el-table 样式 */
.el-table {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

.el-table-column {
  text-align: left;
}

.operation-button {
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
}

.operation-button:hover {
  color: #096dd9;
}
</style>
